<template>
	<view class="signature">
		<text class="signature-text">请在此处签名</text>
		<view class="signature-area">
			<l-signature disableScroll ref="signatureRef" backgroundColor="white" :penColor="penColor"
				:penSize="penSize" :key="landscape" uid="0" :minLineWidth="2" :openSmooth="openSmooth"
				:boundingBox="bBox" landscape></l-signature>
		</view>
		<view class="tools">
			<view class="tools-item flex-center" @tap="onClick('clear')">
				清空签名
			</view>
			<view class="tools-item flex-center c-base" :style="{background:primaryColor}" @tap="onClick('save')">
				确定完成
			</view>
		</view>
		<view class="signature-preview" v-if="url">
			<image class="signature-preview__image" :src="url" mode="aspectFill"></image>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				options: {},
				penColor: 'black',
				penSize: 5,
				url: '',
				landscape: true,
				openSmooth: true,
				bBox: false,
				destWidth: '',
				destHeight: '',
			}
		},
		async onLoad(options) {
			this.options = options
			this.$util.setNavigationBarColor({
				bg: this.primaryColor
			})
			let time = 0
			// #ifndef H5
			time = 1000
			// #endif
			setTimeout(() => {
				const query = uni.createSelectorQuery().in(this)
				query.select('.signature').boundingClientRect(data => {
					console.log(data, "=====data")
					this.destWidth = data.height
					this.destHeight = data.width
				}).exec()
			}, time)
			// #ifdef H5
			this.$jweixin.hideOptionMenu()
			// #endif
		},
		methods: {
			onClick(type) {
				const {
					signatureRef
				} = this.$refs
				if (type == 'openSmooth') {
					this.openSmooth = !this.openSmooth
					return
				}
				if (type == 'save') {
					let {
						destWidth,
						destHeight
					} = this
					signatureRef.canvasToTempFilePath({
						destWidth,
						destHeight,
						quality: 1,
						success: (res) => {
							let {
								tempFilePath = '',
									isEmpty,
							} = res
							this.confirmSign(tempFilePath, isEmpty)
							this.url = tempFilePath
						}
					})
					return
				}
				if (signatureRef) {
					signatureRef[type]()
				}
			},
			async confirmSign(filePath, isEmpty = false) {
				if (!filePath || isEmpty) {
					this.$util.showToast({
						title: `请先进行签名`
					})
					return

				}
				this.$util.showLoading()
				let {
					attachment_path: sign_img
				} = await this.$api.base.uploadFile({
					filePath,
					formData: {
						type: 'picture'
					}
				})

				let {
					id,
					pay_type
				} = this.options

				await Promise.all(pay_type * 1 == 6 ? [this.$api.order.userSignOrder({
					id,
					sign_img
				}), this.$api.order.endOrder({
					id
				})] : [this.$api.order.userSignOrder({
					id,
					sign_img
				})])
				this.$util.hideAll()
				this.$util.showToast({
					title: `签名成功`
				})
				setTimeout(() => {
					this.$util.back()
					this.$util.goUrl({
						url: 1,
						openType: `navigateBack`
					})
				}, 1000)
			}
		}
	}
</script>

<style lang="scss">
	.signature {
		height: 100vh;
		flex: 1;

		&-area {
			height: 100vh;
			flex: 1;
		}

		&-text {
			position: absolute;
			left: 50%;
			top: 50%;
			font-size: 60rpx;
			color: #DCDCDC;
			transform: translate(-50%, -50%) rotate(90deg);
			z-index: 1;
			transition: transform 300ms;
		}

		&-preview {
			position: absolute;
			bottom: -2000rpx;
			right: 20rpx;
			width: 750rpx;
			background: #000;
			box-shadow: 0 0 30rpx rgba(0, 0, 0, 0.05);

			&__image {
				width: 100%;
			}
		}

		.tools {
			z-index: 1;
			position: absolute;
			left: 20rpx;
			bottom: 20rpx;
			display: flex;
			height: 100rpx;
			box-shadow: 0 -10rpx 30rpx rgba(0, 0, 0, 0.05);
			flex-direction: row;
			padding-bottom: calc(env(safe-area-inset-bottom) / 2);
			transform: rotate(90deg) translate(-100%, 0%);
			transform-origin: bottom left;
			border-radius: 50rpx;
			padding: 0;
			overflow: hidden;

			.tools-item {
				padding: 0 30rpx;
			}
		}
	}
</style>